<template>
  <view>

    <public-header :title="title"></public-header>
    <view class="retail-segmented bg-white">
      <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
        activeColor="#38C09E"></uni-segmented-control>
      <view class="content retail-segmented-content bg-white">
        <view v-show="current === 0">
          <rList ref="rListStaff" :config="config" :detailTop="'16rem'" :columnRowConfig="config.columnRowConfig"
            @on-list-item-checked="onItemChecked" :searchValKey="config.searchValKey" :condition="config.condition"
            style="height:calc(100vh - 16rem)">

            <template v-slot:rListItem="itemValue">
              <uni-row :name="itemValue.item.id" class="demo-uni-row" v-if="itemValue.item">
                <uni-col class="text-left text-blod" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                  {{itemValue.item.name}}
                </uni-col>
                <uni-col class="text-right text-blod" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                  {{itemValue.item.phone}}
                </uni-col>
                <uni-col class="text-right text-blod" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                  {{itemValue.item._staff_type_disp}}
                </uni-col>
              </uni-row>
            </template>
            <template v-slot:rLayoutRight>
            </template>
          </rList>
        </view>
        <view v-show="current === 1">
          <rList ref="rListRole" :config="warConfig" :detailTop="'16rem'" :columnRowConfig="warConfig.columnRowConfig"
            @on-list-item-checked="onItemChecked" :searchValKey="warConfig.searchValKey"
            :condition="warConfig.condition" style="height:calc(100vh - 16rem)">
            <template v-slot:rListItem="itemValue">
              <uni-row :name="itemValue.item.id" class="demo-uni-row" v-if="itemValue.item">
                <uni-col class="text-left text-blod" :lg="24">
                  {{itemValue.item.role_name}}
                </uni-col>
                <uni-col class="text-left text-blod" :lg="24">
                  描述：{{itemValue.item.description ? itemValue.item.description : itemValue.item.remark || '-'}}
                </uni-col>
              </uni-row>
            </template>
            <template v-slot:rLayoutRight>
            </template>
          </rList>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import bUpdate from '@/components/g-batch-update/g-batch-update.vue'
  import rList from '@/components/retail-list/retail-list.vue'
  import lockscreen from '@/common/mixins/lockscreen.js'
  export default {
    mixins: [lockscreen],
    data() {
      return {
        title: "",
        items: ['员工管理', '角色权限'],
        current: 0,
        service: "", // 页面service
        type: "update", // 页面编辑模式
        config: {
          serviceName: "srvretail_store_staff_select",
          listLayout: "listAndDetail", // listAndDetail listAndFilter  list
          detailPath: "simple", //  simple  基础的； 或者配置页面路由 路由格式待定
          tabsType: "custom", //
          searchValKey: "name", // 查询的字段名  "col,col,col"
          condition: [],
          columnRowConfig: [{
            columns: ['head_portrait', '#children'],
            showType: "staffUserCard", // usercard  datapanel  staffUserCard
            section: "员工信息",
            label: false,
            colspan: [3, 21], // 列
            buttons: [{
              button_name: "编辑",
              button_type: "edit",
              service: {
                select: "",
                update: "",
                add: "",
                delete: ""
              }
            }],
            children: [{
              columns: ['name', 'staff_status','_staff_type_disp'],
              showType: "formitem", // usercard  datapanel  staffUserCard
              section: "",
              label: true,
              colspan: 12, // 列
              buttons: [],
              children: []
            }, {
              columns: ['staff_no', 'phone'],
              showType: "formitem", // usercard  datapanel  staffUserCard
              section: "",
              label: true,
              colspan: 12, // 列
              buttons: [],
              children: []
            }, {
              columns: ['staff_addr'],
              showType: "formitem", // usercard  datapanel  staffUserCard formitem
              section: "",
              label: true,
              colspan: 24, // 列
              buttons: [],
              children: []
            }, {
              columns: ['remark'],
              showType: "formitem", // usercard  datapanel  staffUserCard formitem
              section: "",
              label: true,
              colspan: 24, // 列
              buttons: [],
              children: []
            }]
          }],
          // ,{
          // 		columns:['name','phone','name'],
          // 		showType:"formitem",   // usercard
          // 		section:"",
          // 		label:'会员卡',
          // 		colspan:6   // 列
          // }
          custTabs: [{
            "colName": "name,phone",
            "type": "input",
            "inputType": "String",
            "parent": "",
            "is_count": true,
            "show_expr": {},
            "label": "姓名或电话",
            "placeholder": "",
            "showLabel": false,
            "default": "",
            "colspan": 24,
            "showAllTag": true,
            "appendSearchButton": true
          }],
          tabs: {
            layout: 'inline', // 'inline'   block
          },
          page: {
            pageNo: 1,
            rownumber: 20
          },
        },
        warConfig: {
          serviceName: "srvsys_app_role_select",
          listLayout: "listAndDetail", // listAndDetail listAndFilter  list  batchList   srvretail_stock_early_warning_select
          defaultData: "service-loading", // batch-select   service-loading
          detailPath: "simple", //  simple  基础的； 或者配置页面路由 路由格式待定
          page: {
            pageNo: 1,
            rownumber: 20
          },
          listHeaders: [''],
          childService: "srvretail_stock_warning_select",
          childKeyCol: "", // 子表数据的主键
          tabsType: "custom", //
          titleText: "返回",
          title: "",
          searchValKey: "role_name", // 查询的字段名  "col,col,col"
          popupColumns: [],
          columnRowConfig: [{
            columns: ['role_name', 'description'],
            showType: "formitem", // usercard  datapanel  staffUserCard
            section: "",
            label: false,
            colspan: 12, // 列
            buttons: [{
              button_name: "编辑",
              button_type: "edit",
              service: {
                select: "",
                update: "",
                add: "",
                delete: ""
              }
            }]
          }],
          custTabs: [{
            "colName": "role_name",
            "type": "input",
            "inputType": "String",
            "parent": "",
            "is_count": false,
            "show_expr": {},
            "label": "角色名称",
            "showLabel": false,
            "default": "",
            "colspan": 24,
            "showAllTag": false,
            "tags": [],
            "appendSearchButton": true
          }],
          tabs: {
            layout: 'inline', // 'inline'   block
          }
        },
        condition: []
      };
    },
    components: {
      bUpdate,
      rList
    },
    methods: {
      onClickItem(e) {
        if (this.current != e.currentIndex) {
          this.current = e.currentIndex;
          if (this.current == 0) {
            this.$refs.rListStaff.getTableDatas()
          } else if (this.current == 1) {
            this.$refs.rListRole.getTableDatas()
          }
        }
      },
      onItemChecked(e) {
        console.log("onItemChecked", e)
      }
    },
    onLoad(option) {
      if (option.title) {
        this.title = option.title
      }
    }
  }
</script>

<style lang="scss" scoped>
  .retail-list .retail-list-right {
    height: calc(100vh-190rpx) !important;
  }
</style>
